<template>
	<view class="index">
		<view class="index_head">
			<image class="search_img" :src="require('../status/image/search.png')" mode=""></image>
			<!-- <u-icon class="search_img" name="search" size="40"></u-icon> -->
			<input class="head_input" type="text" placeholder="搜索嘌呤" v-model="keyword"  />
			<text class="search_btn" @click="searchBtn">搜索</text>
			<!-- 导航 -->
			<view class="index_nav_top">
				<view class="navigator" v-for="(item,index) in navConList" :key="item.text" v-if="index < 2" @click="goToNewPage(item.url)">
					<image class="nav_top_image" :src="item.img" mode=""></image>
					<text>{{item.text}}</text>
				</view>

			</view>
		</view>
		<!-- 中间导航 -->
		<view class="index_nav_con" v-if="navConList.length > 0">
			<view class="nav_con_item" v-for="(item,index) in navConList" :key="item.text" v-if="index >= 2"  @click="goToNewPage(item.url)">
				<image class="con_item_img" :src="item.img" mode=""></image>
				<text>{{item.text}}</text>

			</view>
		</view>
		<!-- 检测图表 -->
		<view class="testing">
			<view class="testing_top">
				<text>最近三个月检测平均值</text>
				<view>
					<text>{{indexChar.avg || 0}}</text>
					<text>umol/L</text>
				</view>
			</view>
			<view class="testing_con"> 
					<view class="qiun-charts">
						<canvas v-show="!userNoLogin" canvas-id="canvasRing" id="canvasRing" class="charts"></canvas>
					</view> 
				<view>
					<view class="con_fr">
						<text class="con_fr_one" style="color: #01cb9b;">正常{{indexChar.normal_scale || 0}}%</text>
						<text class="con_fr_tow" style="color: #01cb9b;">{{indexChar.normal_num || 0}}次</text>
					</view>
					<view class="con_fr">
						<text class="con_fr_one" style="color: #d9a6b0;">偏低 {{indexChar.low_scale || 0}} %</text>
						<text class="con_fr_tow" style="color: #d9a6b0;" >{{indexChar.low_num || 0}}次</text>
					</view>
					<view class="con_fr">
						<text class="con_fr_one" style="color: #f7b948;">偏高 {{indexChar.high_scale || 0}} %</text>
						<text class="con_fr_tow" style="color: #f7b948;">{{indexChar.high_num || 0}} 次</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 痛风专场 -->
		<!-- 		 <view class="special_show">
		 	<view class="special_tit"> 
				<text class="tit_fl">痛风专场</text> 
				<view class="tit_fr"><text>更多</text></view>
			</view>
			<view class="special_con">
				<image :src="bannerImg" mode=""></image>
			</view>
			<scroll-view scroll-x>
				<view class="special_swiper">
					<view class="sw_item" v-for="(item,index) in specialList" :key="index">
						<image class="sw_item_img" :src="item.url" mode=""></image>
						<text class="sw_item_tit">{{item.text}}</text>
						<view class="sw_item_foo"><text class="new_price">{{item.newPrice}}</text> <text class="old_price">{{item.oldPrice}}</text></view>
					</view>
				</view>
			</scroll-view> 
		 </view> -->

		<!-- 健康头条 -->
		<view class="news_list">
			<text class="news_tit">健康头条</text>
			<scroll-view scroll-y style="max-height: 800rpx;" @scrolltolower='scrolltolower'>
				<view class="news_item" v-for="(item,index) in newsList" :key='index' @click="goToArticleDetails(item.id)">
					<view class="item_fl">
						<text class="item_fl_tit">{{item.title}}</text>
						<view class="item_fl_foo">
							<text>{{item.cate_name}}</text>
							<text style="margin: 0 20rpx;">{{item.read}}</text>
							<text>{{item.create_time}}</text>
						</view>
					</view>
					<view class="item_fr">
						<image style="width: 100%; height: 100%;" :src="item.img" mode=""></image>
					</view>
				</view>
				<view class="no_data" v-show="showNoData">没有更多数据了</view>
			</scroll-view> 
		</view>
		<view class="page-bottom"  ><diy-bottom-nav type="shop"  @callback="callback"></diy-bottom-nav></view>
		<ns-login ref="login" type="page"></ns-login>
	</view>
</template>

<script>
	import uCharts from '../compon/u-charts/u-charts.js';
	import diyBottomNav from '@/components/diy-bottom-nav/diy-bottom-nav.vue';
	var _self;
	var canvaRing = null;
	export default {
		components:{
			diyBottomNav,
		},
		data() {
			return {
				// 新闻列表页数
				page: 1,
				// 是否显示暂无数据提示
				showNoData: false,
				// 搜索关键字
				keyword:'', 
				// 图表数据
				indexChar:'', 
				// 用户是否登录
				userNoLogin: false,
				// 用户是否有完善信息 true为完善
				userPerfectInfo: true,
				navConList: [],
				newsList: [], 
				pixelRatio: 1,
				serverData: '',
				oldChartData: [{"data": 0, "color": "#01cb9b"}],
				newChartData: []

			};
		},
		onShow() { 
			// 新闻列表
			this.getArticle()
			// 图表数据
			this.getIndexChar() 
			// 获取nav图标
			this.getUaNav() 
			if(this.newChartData.length == 0){
				this.getServerData(this.oldChartData); 
			}
			uni.$on('changeUserNoLogin', (type) => {
				this.userNoLogin = type,
				this.getIndexChar()
			})
		},
		onHide() {
			this.newsList = []
			this.page = 1
		},
		methods: {
			addRecordns() {
				uni.navigateTo({
					url: 'addrecordns/index'
				})
			},
			getServerData(chartData) {
				this.showRing("canvasRing", chartData);
			},
			showRing(canvasId, chartData) {
				let _this = this
				canvaRing = new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 8,
					legend: true,
					title: {
						name: _this.indexChar.all_num || '0',
						color: '#333',
						fontSize: 24,
						offsetY: 0,
					}, 
					subtitle:{
						name: '测试次数',
						color: '#717171',
					},
					extra: {
						pie: {
							offsetAngle: 0,
							ringWidth: 10,
							labelWidth: 12 
						}
					},
					background: '#FFFFFF',
					pixelRatio: _this.pixelRatio,
					series: chartData,
					animation: true,
					width: 160,
					height: 140,
					disablePieStroke: true,
					dataLabel: true,
					// 下方图例
					legend: {
						show: false
					},
					dataLabel:false
				});
			}, 
			// 获取文章列表
			getArticle(){
				this.$api.sendRequest({
					url: '/api/article/lists?page=' + this.page,
					success: res => { 
						this.newsList.push(...res.data.data)
						this.showNoData = res.data.total == this.newsList.length 
					}
				})
			},
			// 前往新页面
			goToNewPage(url){
				// 如果未登录 
				if(this.userNoLogin){
					this.$refs.login.open();
					// 如果未完善信息
				}else if (!this.userPerfectInfo){
					uni.showModal({
						title: '温馨提示',
						content: '请前往完善基础信息',
						success: res => {
							if(res.confirm){ 
								// this.userPerfectInfo = true
								uni.navigateTo({
									url: '/page/archives/infodata/index'
								})
							}
						}
					})
				}else{
					uni.navigateTo({
						url
					})
				}
			 
			},
			// 前往文章详情
			goToArticleDetails(id){
				uni.navigateTo({
					url: 'articledetails/index?id='+ id
				})
			},
			// 触底触发
			scrolltolower(){
				if(!this.showNoData){
					this.page += 1
					this.getArticle()
				} 
			},
			// 失去焦点
			// blur(){ 
			// 	if(this.keyword){
			// 		uni.navigateTo({
			// 			url: '../querypiaol/index?keyword=' + this.keyword
			// 		})
			// 		this.keyword = ''
			// 	} 
			// },
			// 点击搜索
			searchBtn(){  
				uni.hideKeyboard();
				if(this.keyword){
					uni.navigateTo({
						url: '../querypiaol/index?keyword=' + this.keyword
					})
					// this.keyword = ''
				}else{
					uni.showToast({
						title: '输入要查询的关键字',
						icon: 'none',
						duration: 1000
					})
				}
			},
			// 获取首页图表数据
			getIndexChar(){ 
				let _this = this
				this.$api.sendRequest({
					url: '/api/ua/indexChar',
					data: {},
					success: res => { 
						if(res.code == 0){ 
							this.indexChar = res.data  
							_this.newChartData = []
							_this.userPerfectInfo = true 
							_this.newChartData.push(
							{'data': res.data.low_num, 'color': '#e4aeb0'}, 
							{'data': res.data.normal_num,'color': '#01cb9b'}, 
							{'data': res.data.high_num,'color': '#f7b995'}) 
							_this.getServerData(_this.newChartData);  
						}else if (res.code == -1){  
							this.userNoLogin = true
							this.$refs.login.open();
						}else if (res.code == 10001){
							// 未完善信息  
							this.userPerfectInfo = false 
						}
					}
				})
			},
			// 获取nav图标
			getUaNav(){
				this.$api.sendRequest({
					url: '/api/ua/nav',
					success: res => { 
						if(res.code >= 0){
							this.navConList = res.data
						}
					}
				})
			},
			toJSON(){ return this }
			/**
			 * 跳转去登录页
			 */
			// toLogin() {
			// 	if (this.url) this.$util.redirectTo('/login/login/login', { back: encodeURIComponent(this.url) });
			// 	else this.$util.redirectTo('/login/login/login');
			// },
		}
	}
</script>

<style lang="less">
	.index { 
		padding-bottom: 20rpx;
		margin-bottom: 200rpx;
		background-color: #f3f3f3;
 
		.index_head {
			position: relative; 
			padding: 0 30rpx;
			height: 400rpx;
			background-color: #01cb9b;

			.search_img {
				position: absolute;
				top: 20rpx;
				left: 60rpx;
				width: 40rpx;
				height: 40rpx;
				z-index: 1001;
			}

			.head_input {
				position: relative;
				padding-left: 100rpx;
				width: calc(100% - 280rpx);
				height: 80rpx;
				font-size: 28rpx;
				color: #a4a4a4;
				background-color: #fff;
				border-radius: 40rpx;
			}
			.search_btn{
				position: absolute;
				right: 50rpx;
				top: -2rpx;
				width: 200rpx;
				height: 82rpx;
				line-height: 82rpx;
				font-size: 30rpx; 
				color: #01cb9b;
				z-index: 1000;
				text-align: center; 
				background-color: #fff; 
				border-radius: 0 40rpx 40rpx 0;
				border-left: 2rpx solid #01cb9b;
			}
			.head_tit {
				color: #fff;
				font-size: 28rpx;
			}

			.index_nav_top {
				display: flex;
				position: absolute;
				width: calc(100% - 60rpx);
				top: 260rpx;
				height: 200rpx;
				border-radius: 30rpx;
				background-color: #fff;

				.navigator {
					flex: 1;
					line-height: 200rpx;
					font-size: 30rpx;
					text-align: center;

					.nav_top_image {
						margin-right: 40rpx;
						width: 60rpx;
						height: 60rpx;
						vertical-align: middle;
					}
				}

				&::before {
					position: absolute;
					content: '';
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					width: 2rpx;
					height: 100rpx;
					background-color: #e1e1e1;
				}
			}

		}

		.index_nav_con {
			display: flex;
			margin-top: 60rpx;
			height: 200rpx;
			background-color: #fff;
			border-top: 2rpx solid #f2f2f2;

			.nav_con_item {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				text-align: center;
				border-right: 2rpx solid #e1e1e1;

				.con_item_img {
					margin: 0 auto;
					width: 60rpx;
					height: 60rpx;
				}
			}
		}

		.testing {
			margin: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;

			.testing_top {
				display: flex;
				justify-content: space-around;
				height: 140rpx;
				line-height: 140rpx;
				border-bottom: 2rpx solid #f3f3f3;

				view {
					margin-top: 30rpx;
					display: flex;
					text-align: center;
					flex-direction: column;
					color: #03cca2;
				}
			}

			.testing_con {
				display: flex;
				// height: 260rpx;
				background-color: #fff;

				view { 
					flex: 1;
				}

				& view:nth-child(1) {}

				& view:nth-child(2) {
					.con_fr {
						margin-top: 20rpx;
						display: flex;

						.con_fr_one {
							margin-right: 30rpx;
							width: 200rpx;
							height: 50rpx;
							line-height: 50rpx;
							text-align: center;
							border-radius: 20rpx;
							border: 2rpx solid #f3f3f3;
						}
					}
				}
			}
		}

		.special_show {
			margin: 10rpx;
			padding: 20rpx;
			border-radius: 10rpx;
			background-color: #fff;

			.special_tit {
				display: flex;
				justify-content: space-between;
				height: 80rpx;
				line-height: 80rpx;

				.tit_fl {
					font-weight: 700;
				}

				.tit_fr {
					line-height: 80rpx;
					font-size: 28rpx;
					color: #bababa;
				}
			}

			.special_con {
				margin-bottom: 10rpx;
				height: 260rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}

			.special_swiper {
				position: relative;
				right: 30rpx;
				width: 100vw;
				display: flex;
				height: 320rpx;
				overflow: hidden;

				.sw_item {
					margin: 0 10rpx;
					// width: 200rpx;
					flex: 1;

					.sw_item_img {
						width: 100%;
						height: 60%;
					}

					.sw_item_tit {
						font-size: 24rpx;
						display: block;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.sw_item_foo {
						.new_price {
							color: #eb896f;
						}

						.old_price {
							color: #adadad;
							font-size: 24rpx;
							text-decoration: line-through;
						}
					}
				}
			}
		}

		.news_list {
			margin: 20rpx 0;
			margin-bottom: 140rpx;
			padding: 40rpx 20rpx;
			background-color: #fff;

			.news_tit {
				display: block;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				color: #e8b254;
				font-size: 32rpx;

				&::before {
					display: inline-block;
					content: '';
					margin: 0 10rpx 10rpx 0;
					width: 60rpx;
					height: 2rpx;
					background-color: #e8b9b7;
				}

				&::after {
					display: inline-block;
					content: '';
					margin: 0 0 10rpx 10rpx;
					width: 60rpx;
					height: 2rpx;
					background-color: #e8b9b7;
				}
			}

			.news_item {
				padding: 20rpx 0;
				display: flex;
				height: 200rpx;
				border-bottom: 2rpx solid #f5f5f5;
				 
				.item_fl {
					width: 512rpx;

					.item_fl_tit {
						font-size: 28rpx;
						font-weight: 700;
						font-size: 32rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}

					.item_fl_foo {
						margin-top: 10rpx;
						color: #c0c0c0;
						font-size: 26rpx;
					}
				}

				.item_fr {
					width: 200rpx;
					height: 100%;
				}
			}
			.no_data{
				text-align: center;
			}
		}
		
		.qiun-charts{ 
			width: 280rpx;
			height: 280rpx;
			.charts{
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
